<template>
	<view style="height: 100%;">
		<view class="avatar" style="padding-bottom: 50rpx;">
			<view style="height: 134rpx;padding-top: 62rpx;padding-left: 10px;">
				<image style="width: 260rpx;height: 90rpx;" src="/static/image/logo.png" mode="aspectFit" />
			</view>
		</view>

		<view class="content" style="flex-direction: column;">
			<!-- 我的 -->
			<!-- <div class="my">
				<uni-section title="我的" type="line"
					style="background-color: #efefef;text-align: left;font-weight: bold;"></uni-section>
			</div>
			<view class="line"></view> -->

			<!-- 宫格布局 -->
			<view style="width: 100%;background: #fff;border-radius: 10px;margin-bottom: 10px;">
				<view style="padding: 10px 0 0 20px;font-weight: bold;">
					我的
				</view>
				<view class="Grid">
					<view class="Grid-Item" v-for="item in List" :key="item.id" @click="address(item)">
						<view class="GSimg">
							<image class="Image" :src="item.img"></image>
							<view class="GStitle">{{ item.title }}</view>
						</view>

					</view>
				</view>
			</view>

			<!-- 	<view class="space">
				<p></p>
			</view> -->

			<!-- 我的订货 -->
			<!-- <div class="my">
				<uni-section title="我的订货" type="line"
					style="background-color: #efefef;text-align: left;ont-weight: 700;"></uni-section>
			</div>
			<view class="line"></view> -->

			<view style="width: 100%;background: #fff;border-radius: 10px;margin-bottom: 10px;">
				<view style="padding: 10px 0 0 20px;font-weight: bold;">
					我的订货
				</view>
				<view class="Grid">
					<view class="Grid-Item" v-for="item in List2" :key="item.id" @click="page(item.id)">
						<view class="GSimg">
							<image class="Image" :src="item.img"></image>
							<view class="GStitle">{{ item.title }}</view>
						</view>
						<div v-if="item.id==1" style="position: relative;">
							<u-badge type="error" :count="orderStatus['4']"
								style="position: absolute;top:-120rpx;right:20rpx;"></u-badge>
						</div>
						<div v-if="item.id==2" style="position: relative;">
							<u-badge type="error" :count="orderStatus['3']"
								style="position: absolute;top:-120rpx;right:23rpx;"></u-badge>
						</div>
						<div v-if="item.id==3" style="position: relative;">
							<u-badge type="error" :count="orderStatus['2']"
								style="position: absolute;top:-120rpx;right:23rpx;"></u-badge>
						</div>
						<!-- <div v-if="item.id==4" style="position: relative;">
						<u-badge type="error" :count="orderStatus['1']" style="position: absolute;top:-120rpx;right:23rpx;"></u-badge>
					</div> -->

					</view>
				</view>
			</view>
			<!-- 使用帮助 -->
			<view style="width: 100%;background: #fff;border-radius: 10px;">
				<view style="padding: 10px 0 0 20px;font-weight: bold;">
					使用帮助
				</view>
				<view class="Grid">
					<view class="Grid-Item" v-for="item in List3" :key="item.id" @click="help(item)">
						<view class="GSimg">
							<image class="Image" :src="item.img"></image>
							<view class="GStitle">{{ item.title }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				messageArr: [],
				orderStatus: {
					'4': 0,
					'3': 0,
					'2': 0,
					'1': 0,
					'0': 0,
				},
				tar: {
					color: '#07A7E3',
					id: 3,
				}, //向子组件发送的值

				List: [{
						id: 1,
						img: '/static/image/location.png',
						title: '收货地址'
					},
					{
						id: 2,
						img: '/static/image/people.png',
						title: '我的账户'
					},
					{
						id: 3,
						img: '/static/image/pwd.png',
						title: '修改密码'
					},
					// {
					// 	id: 4,
					// 	img: '/static/image/fp.png',
					// 	title: '开票申请'
					// },
					// {
					// 	id: 5,
					// 	img: '/static/image/xx.png',
					// 	title: '消息订阅'
					// },
				],

				List2: [{
						id: 0,
						img: '/static/image/form.png',
						title: '我的订单'
					},
					{
						id: 1,
						img: '/static/image/ok.png',
						title: '待审核'
					},
					{
						id: 2,
						img: '/static/image/send.png',
						title: '待发货'
					},
					{
						id: 3,
						img: '/static/image/sh.png',
						title: '待收货'
					},
					{
						id: 4,
						img: '/static/image/round_check.png',
						title: '已完成'
					},
					{
						id: 5,
						img: '/static/image/round_close.png',
						title: '已作废'
					},
				],
				
				List3: [{
						id: 0,
						img: '/static/image/help.png',
						title: '帮助文档'
					},
				]
			}
		},
		onShow: function() {
			this.orderStatus = {
				'4': 0,
				'3': 0,
				'2': 0,
				'1': 0,
				'0': 0,
			}
			this.$u.api.shop.orderStatusCount({
				cusCode: this.vuex_basCus.code,
				createBy: this.vuex_user.userCode
			}).then(res => {
				if (res.result == 'false') {
					uni.showToast({
						title: res.message,
						icon: 'none',
					});
				} else {
					for (let key in res) {
						this.orderStatus[key] = res[key].num
					}
				}
			})
			this.$u.api.shop.getTempleteIda().then(res => {
				this.messageArr = res
			})
		},
		onLoad() {

		},
		methods: {
			page(id) {
				let obj = {};
				uni.navigateTo({
					url: '/pages/btdm/index/user/orderList?id=' + id,
				})
			},
			address(item) {
				console.log(item);
				if (item.id == '1') {
					uni.navigateTo({
						url: '/pages/btdm/index/user/address/addSite',
					})
				} else if (item.id == '2') {
					uni.navigateTo({
						url: '/pages/btdm/index/user/my',
					})
				} else if (item.id == '3') {
					uni.navigateTo({
						url: '/pages/btdm/index/user/pwd',
					})
				}else if (item.id == '4') {
					uni.navigateTo({
						url: '/pages/btdm/index/user/invoice/invoice',
					})
				}
				//  else if (item.id == '4') {
				// 	this.subscribe()
				// }
			},
			help(item) {
				console.log(item);
				if (item.id == '0') {
					uni.navigateTo({
						url: '/pages/btdm/index/user/help/index',
					})
				}
			},
			subscribe() { // 订阅信息
				// if (uni.getStorageSync('accept')) {
				// 	this.$u.toast('已订阅过,无需重复订阅！');
				// } else {
				// 	uni.requestSubscribeMessage({
				// 		tmplIds: ['-nSW356fWDZEtmpL9gyweVXT5imwVcPXWpKvXV66DdM','3tdFA89DWhDKSbqoYVre0X31Wh6Mtg_RYpPiiFf1NfA'],
				// 		success(res) {
				// 			console.log(res);
				// 			if (res['-nSW356fWDZEtmpL9gyweVXT5imwVcPXWpKvXV66DdM'] == "accept") { // 用户点击确定后
				// 				console.log('1111');
				// 				uni.setStorageSync('accept', true);
				// 			}
				// 		}
				// 	})
				// }
				let that = this
				uni.getSetting({
					withSubscriptions: true,
					success(res) {
						console.log('1', res);
						if (!res.subscriptionsSetting.mainSwitch) {
							uni.showModal({
								title:'是否重新授权消息订阅功能',
								success(req) {
									if(req.confirm){
										uni.openSetting()
									}
								}
							})
							// uni.openSetting()
							// this.$u.toast('已订阅过,无需重复订阅！');
							
						} else {
							
							if(res.subscriptionsSetting.itemSettings ){
								uni.showModal({
									title:'是否重新设置订阅消息',
									success(req) {
										if(req.confirm){
											uni.openSetting()
										}
									}
								})
							}else{
								uni.requestSubscribeMessage({
									// tmplIds: ['-nSW356fWDZEtmpL9gyweVXT5imwVcPXWpKvXV66DdM',
									// 	'3tdFA89DWhDKSbqoYVre0X31Wh6Mtg_RYpPiiFf1NfA'
									// ],
									tmplIds:that.messageArr,
									success(res) {
										console.log(res);
										if (res['-nSW356fWDZEtmpL9gyweVXT5imwVcPXWpKvXV66DdM'] ==
											"accept") { // 用户点击确定后
											console.log('1111');
											// uni.setStorageSync('accept', true);
										}
									}
								})
							}
							
							
							
						}
					}
				})
			},
		},


	}
</script>

<style scoped lang="scss">
	page {
		width: 100%;
		height: 100%;
		text-align: center;
	}

	.avatar {
		background: url('/static/image/homeAvatar.jpg');
	}

	.content {
		/* text-align: center; */
		padding: 10px;
		// background-color: #fff;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.bottom {
		color: #000000;
	}

	.line {
		width: 1000px;
		height: 1.5px;
		background-color: #e5e5e5;
	}

	.wrap {
		padding: 24rpx;
	}

	.u-row {
		margin: 40rpx 0;
	}

	.demo-layout {
		height: 80rpx;
		border-radius: 8rpx;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.Grid {
		width: 100%;
		float: left;
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
		// justify-content: space-between;
		align-content: space-between;
		// background: #f7f7f7;
		// padding: 10rpx 0;
		// background: url('/static/image/userBg.png');
		// background-size: cover;
		// background-position: bottom;

		.Grid-Item {
			width: 25%;
			height: 213rpx;
			text-align: center;
			// border:1rpx solid #ccc;
			box-sizing: border-box;

			.GSimg {
				width: 96rpx;
				height: 96rpx;
				margin-top: 42rpx;
				margin-left: 50rpx;

				.Image {
					width: 60rpx;
					height: 60rpx;
				}
			}

			.GStitle {
				width: 100%;
				height: 34rpx;
				line-height: 30rpx;
				color: #06121e;
				font-size: 24rpx;
				margin-top: 18rpx;
			}
		}
	}
</style>